<template>
    <div>
        <div style="display: flex;justify-content: space-between;margin-top: 10px;margin-bottom: 10px">
            <div>
                <el-input size="small" prefix-icon="el-icon-search" placeholder="输入员工名查找员工.."
                          style="margin-right: 10px;width: 300px" v-model="keyword"
                          :disabled="showAdvanceSearchView"
                          @keydown.enter.native="initEmps" clearable @clear="initEmps"
                />
                <el-button size="small" type="primary" icon="el-icon-search" round :disabled="showAdvanceSearchView"
                           @click="initEmps">
                    搜索
                </el-button>
                <el-button size="small" type="primary" round @click="()=>{
                    showAdvanceSearchView = !showAdvanceSearchView;
                    if (showAdvanceSearchView){
                        // this.initStableData();
                        advanceSearchIcon='fa fa-angle-double-up';
                    }
                    else{
                        this.emptySearchEmp();
                        advanceSearchIcon='fa fa-angle-double-down';
                        this.initEmps();
                    }
                }">
                    <i :class="advanceSearchIcon" aria-hidden="true" style="margin-right: 5px"/>高级搜索
                </el-button>
            </div>
            <div>
                <el-button size="small" round icon="el-icon-refresh" type="primary" @click="clearSessionStorage"
                           style="margin-right: 8px;"></el-button>
                <el-upload
                        disabled
                        style="display: inline-flex;margin-right: 8px"
                        action="/employee/basic/import"
                        :show-file-list="false"
                        :before-upload="()=>{isUpload=true}"
                        :on-success="onSuccess"
                        :on-error="onError"
                >
                    <el-button round type="success" size="small" v-if="isUpload===false" disabled>
                        <i class="fa fa-level-up"/>
                        导入数据
                    </el-button>
                    <el-button round type="success" size="small" icon="el-icon-loading" :disabled="isUpload" v-else disabled>
                        正在上传
                    </el-button>
                </el-upload>
                <el-button round type="success" size="small" @click="exportData" disabled>
                    <i class="fa fa-level-down"/>
                    导出数据
                </el-button>
                <el-button round type="primary" size="small" icon="el-icon-plus" @click="showAddEmp" disabled>
                    添加员工
                </el-button>
            </div>
        </div>
        <transition name="slide-fade">
            <div v-show="showAdvanceSearchView"
                 style="border: 1px solid skyblue;box-sizing: border-box;border-radius: 5px;margin-bottom: 8px;padding-left: 5px">
                <el-row style="padding-top: 3px;padding-bottom: 3px;width: 100%">
                    <el-col :span="5">
                        学院：
                        <el-input v-model="searchEmp.dept" class="width150" size="small"></el-input>
                    </el-col>
                    <el-col :span="5">
                        专业班级：
                        <el-input v-model="searchEmp.major" class="width150" size="small"></el-input>
                    </el-col>
                    <el-col :span="10" style="margin-top: 5px">
                        在校时间：
                        <el-date-picker
                                v-model="searchEmp.beginAndEnddate"
                                type="daterange"
                                size="mini"
                                :unlink-panels="false"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4" style="display: flex;justify-content: flex-end;">
                        <div style="margin-right: 10px">
                            <el-button size="small" round @click="()=>{
                                showAdvanceSearchView=false;
                                this.emptySearchEmp();
                                this.initEmps();
                            }">取消
                            </el-button>
                            <el-button size="small" type="primary" round icon="el-icon-search" @click="advanceSearch">
                                搜索
                            </el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </transition>
        <div>
            <el-table
                    :row-style="getRowClass" :cell-style="getCellClass"
                    :ref="multipleSelection"
                    :data="Emps"
                    stripe
                    @selection-change="handleSelectionChange"
                    v-loading="loading"
                    style="width: 100%;">
                <el-table-column
                        type="selection"
                        align="left"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="left"
                        prop="name"
                        label="姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="sno"
                        label="学号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="dept"
                        label="学院"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="major"
                        label="专业班级"
                        width="150">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="age"-->
<!--                        label="年龄"-->
<!--                        width="100">-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="sex"
                        label="性别"
                        width="70">
                    <template slot-scope={row}>
                        <span v-if="row.sex===1">男</span>
                        <span v-else>女</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="idcard"
                        label="身份证号码"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="电子邮件"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话号码"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="begintime"
                        label="入学时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="endtime"
                        label="毕业时间"
                        width="150">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="100px"
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="info" icon="el-icon-edit" size="mini" style="padding: 2px" circle
                                   @click="showEditEmp(scope.row)"></el-button>

                        <el-button style="padding: 2px" size="mini" type="danger" round
                                   @click="deleteEmpByid(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content:space-between;  margin-top: 10px">
                <div>
                    <el-button size="small" round type="danger" icon="el-icon-delete"
                               :disabled="multipleSelection.length==0"
                               @click="deleteMany">删除全部
                    </el-button>
                </div>
                <div>
                    <el-pagination
                            background
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total"
                            :page-size="size"
                            :page-count="total/size"
                            :current-page="page"
                            @size-change="sizeChange"
                            @current-change="currentPage"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <el-form ref="emp" :model="emp" :rules="rules" label-position="right" label-width="110px">
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item prop="name" label="姓名:">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.name"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="性别:" prop="sex">
                                <el-radio size="small" v-model="emp.sex" :label="1" style="width: 30px">男</el-radio>
                                <el-radio size="small" style="padding-left: 0px" v-model="emp.sex" :label="0">女
                                </el-radio>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学院:" prop="dept">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.dept"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="专业班级:" prop="major">
                                <el-input size="small" class="width150" clearable prefix-icon="el-icon-edit"
                                          v-model="emp.major"/>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="民族:" prop="nationid">
                                <el-select size="small" placeholder="民族" class="width150" value="汉族">
                                    <el-option
                                            value="汉族"
                                            label="汉族">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学号:" prop="sno">
                                <el-input size="small" clearable class="width150" v-model="emp.sno"
                                          :disabled="true"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="电子邮箱:" prop="email">
                                <el-input size="small" prefix-icon="el-icon-message" clearable class="width150"
                                          v-model="emp.email" placeholder="Email电子邮箱"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="电话号码:" prop="phone">
                                <el-input size="small" clearable class="width150" prefix-icon="el-icon-phone"
                                          v-model="emp.phone" placeholder="电话号码"/>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="学历:">
                                <el-select size="small"  placeholder="最高学历" class="width150" value="本科">
                                    <el-option
                                            value="本科"
                                            label="本科">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="毕业学校:">
                                <el-input size="small" clearable prefix-icon="el-icon-edit" class="width150"
                                           placeholder="毕业学校" value="韶关学院"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="入学日期:" prop="begintime">
                                <el-date-picker
                                        style="width: 150px"
                                        v-model="emp.begintime"
                                        type="date"
                                        size="small"
                                        placeholder="入学日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div style="display: flex">
                            <el-form-item label="毕业日期:" prop="endtime">
                                <el-date-picker
                                        style="width: 150px"
                                        v-model="emp.endtime"
                                        type="date"
                                        size="small"
                                        placeholder="毕业日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div style="display: flex">
                            <el-form-item label="身份证号码:" prop="idcard">
                                <el-input size="small" clearable v-model="emp.idcard" placeholder="身份证号码"
                                          prefix-icon="el-icon-edit"/>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div style="display: flex">
                            <el-form-item label="联系地址:" prop="address">
                                <el-input size="small" prefix-icon="el-icon-edit" clearable
                                          v-model="emp.address" placeholder="联系地址"/>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button size="small" @click="cancleAddEmp">取 消</el-button>
    <el-button size="small" type="primary" @click="addEmp">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    const url = '/members/detail/'
    export default {
        name: "MemDetail",
        data() {
            return {
                fileList: [],
                roomFaces: [],
                registerFace: {
                    file: '',
                    name: '',
                    groupId: '',
                    faceId: '',
                },
                faceTitle: "上传图片",
                searchEmp: {
                    dept: '',
                    major: '',
                    posid: '',
                    engageform: '',
                    beginAndEnddate: '',
                },
                isUpload: false,
                advanceSearchIcon: 'fa fa-angle-double-down',
                showAdvanceSearchView: false,
                roomFaceDialogVisible: false,
                Emps: [],
                popoverVisible: false,
                loading: false,
                total: 0,
                page: 1,
                size: 10,
                keyword: '',
                dialogVisible: false,
                faceDialogVisible: false,
                multipleSelection: [],
                emp: {
                    name: "",
                    sex: '',
                    birthday: "",
                    idcard: "",
                    wedlock: "",
                    nationid: '',
                    nativeplace: "",
                    dept: '',
                    email: "",
                    phone: "",
                    address: "",
                    sno: "",
                    major: '',
                    engageform: "",
                    tiptopdegree: "",
                    specialty: "",
                    school: "",
                    begintime: "",
                    workstate: "在职",
                    contractterm: 0,
                    endtime: "",
                    notworkdate: null,
                    begincontract: "",
                    endcontract: "",
                    workage: null,
                    faceId: '',
                },
                rules: {
                    name: [
                        {required: true, message: '请输入活动名称', trigger: 'blur'},
                        {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    idcard: [
                        {required: true, message: '请输入身份证号码', trigger: 'blur'},
                        {min:18,max:18,message: '长度必须为18位',trigger: 'blur'}
                    ],
                    email: [{required: true, message: '请输入电子邮箱', trigger: 'blur'}],
                    phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
                    address: [{required: true, message: '请输入家庭住址', trigger: 'blur'}],
                    begintime: [{required: true, message: '请选择入学日期', trigger: 'change'}],
                    endtime: [{required: true, message: '请选择毕业日期', trigger: 'change'}],
                    dept: [{required: true, message: '请输入学院名称', trigger: 'change'}],
                    major: [{required: true, message: '请输入专业班级', trigger: 'change'}],
                },
                politicsstatus: [],
                nations: [],
                positions: [],
                degree: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                tempDepName: '',
                title: '',
                empFace: {
                    empId: '',
                    faceId: '',
                },
                roomFace: {
                    roomId: '',
                    faceId: ''
                },
                rfmultipleSelection: [],
            }
        },
        mounted() {
            this.initEmps();
        },
        methods: {
            handleChange(file, fileList) {
                this.fileList = fileList
            },
            advanceSearch() {
                // console.log(this.searchEmp);
                this.page = 1;
                this.size = 10;
                this.initEmps();
                // this.emptySearchEmp();
            },
            emptySearchEmp() {
                this.searchEmp = {
                    dept: '',
                    major: '',
                    posid: '',
                    engageform: '',
                    beginAndEnddate: '',
                };
                this.page = 1;
                this.size = 10;
            },
            onSuccess(response, file, fileList) {
                this.isUpload = false;
                this.initEmps();
                this.$notify({
                    title: '添加成功',
                    type: "success",
                });
            },
            onError(response, file, fileList) {
                this.isUpload = false;
                this.$notify({
                    title: '添加失败',
                    type: "error",
                });
            },
            exportData() {
                this.$confirm('此操作将导出数据库中所有员工的资料, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.open('/employee/basic/export', '_parent');
                    this.$notify({
                        title: '导出成功',
                        type: "success",
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            clearSessionStorage() {
                this.initEmps()
            },
            emptyEmp() {
                this.emp = {
                    name: "",
                    sex: "",
                    birthday: "",
                    idcard: "",
                    dept: "",
                    major: '',
                    nativeplace: "",
                    politicid: '',
                    email: "",
                    phone: "",
                    address: "",
                    workid: "",
                    posid: '',
                    engageform: "",
                    tiptopdegree: "",
                    specialty: "",
                    school: "",
                    begintime: "",
                    workstate: "在职",
                    endtime: "",
                    notworkdate: null,
                    begincontract: "",
                    endcontract: "",
                    workage: null,
                    faceId: '',
                };
                this.tempDepName = '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteMany() {
                this.$confirm('此操作将永久删除【' + this.multipleSelection.length + '】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = '?';
                    this.multipleSelection.forEach(emp => {
                        ids += 'ids=' + emp.id + '&';
                    });
                    // console.log(ids)
                    this.deleteRequest('/members/detail/' + ids).then(resp => {
                        if (resp) {
                            this.multipleSelection = [];
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            deleteEmpByid(emp) {
                this.$confirm('此操作将永久删除【' + emp.name + '】该名员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/members/detail/' + emp.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cancleAddEmp() {
                this.dialogVisible = false;
                this.tempDepName = '';
                this.$refs.emp.resetFields()
            },
            handleUpdateEmp(emp) {
                this.putRequest("/members/detail/", emp).then(resp => {
                    if (resp) {
                        this.tempDepName = '';
                        this.emptyEmp();
                        this.dialogVisible = false;
                        this.initEmps();
                    }
                })
            },
            emptyRegister() {
                this.registerFace = {
                    file: '',
                    name: '',
                    groupId: '',
                    faceId: '',
                }
            },
            addEmp() {
                this.$refs['emp'].validate(valid => {
                    if (valid) {
                        this.handleUpdateEmp(this.emp)
                    } else {
                        return false;
                    }
                })
            },
            handleAddEmp(emp) {
                this.postRequest("/employee/basic/", emp).then(resp => {
                    if (resp) {
                        this.tempDepName = '';
                        this.emptyEmp();
                        this.dialogVisible = false;
                        this.initEmps();
                    }
                })
            },
            showAddEmp() {
                this.emptyEmp();
                this.title = '添加员工';
                this.dialogVisible = true;
            },
            showEditEmp(data) {
                Object.assign(this.emp, data);
                this.title = '编辑员工资料';
                this.dialogVisible = true;
                // console.log(this.emp)
            },
            currentPage(val) {
                this.page = val;
                this.initEmps();
            },
            sizeChange(val) {
                this.size = val;
                this.page = 1;
                this.initEmps();
            },
            initEmps() {
                this.loading = true;
                let advanceSearch = '&dept=' + this.searchEmp.dept + '&major=' + this.searchEmp.major ;
                if (this.searchEmp.beginAndEnddate) {
                    advanceSearch +=  '&beginTime=' + this.searchEmp.beginAndEnddate[0] + '&endTime=' + this.searchEmp.beginAndEnddate[1];
                }
                let n_url = "/members/detail/?page=" + this.page + '&size=' + this.size + '&name=' + this.keyword + advanceSearch
                // console.log(n_url)
                this.getRequest(n_url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.Emps = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            getRowClass({ row, rowIndex }) {
                return "background:transparent;";
            },
            getCellClass({row, column, rowIndex, columnIndex}) {
                return "background:transparent;";
            },
        }
    }
</script>

<style>

    .width150 {
        width: 150px;
    }

    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }

    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }


</style>
<style scoped>
    /* 用来设置当前页面element全局table 选中某行时的背景色*/
    /deep/ .el-table__body tr.current-row>td{
        background-color: rgba(35,29,37,.9) !important;
        /* color: #f19944; */  /* 设置文字颜色，可以选择不设置 */
    }

    /deep/ .el-table, /deep/ .el-table__expanded-cell {
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table th, /deep/ .el-table tr, /deep/ .el-table td{
        background-color: rgba(35,29,37,.26);
    }
    /deep/ .el-table--enable-row-transition, /deep/ .el-table__body td, /deep/ .el-table .cell{
        background-color: rgba(35,29,37,.1);;
    }
    /deep/ .el-table .cell{
        color: rgba(256, 256, 256, 0.78);
    }
</style>


